<template>
	<view>

		

		<view class="inforPage_box">
			
		
			<!-- 搜索 -->
			<!-- <view class="inforSearch_box">
				<u-search placeholder="请输入搜索关键字" v-model="keyword" bg-color="#fff" :show-action="false"
					:clearabled="true" @search="searchClick"></u-search>
			</view> -->

			<!-- 菜单 -->
			<!-- <view class="inforMenu_box">
				<view class="menuItem" v-for="(item,index) in catList" :key="index"
					@click="selectCateList(item.id)">
					<view class="menuIcon">
						<image :src="item.img_url" mode=""></image>
					</view>
					<view class="menuName">{{item.name}}</view>
				</view>
			</view> -->

			<!-- 列表 -->
			<view class="inforList_box">
				<view class="inforPicker_con">
					
					<view class="pickerCon">
						<view class="picker" >
							<!-- {{mapCity?mapCity:'附近信息'}} -->
							<picker mode="region" custom-item="全部" :value="cityValue" @change="citySelect">位置:{{mapCity?mapCity:'附近信息'}}</picker>
						</view>
						<u-icon name="arrow-down" color="#999" size="28"></u-icon>
					</view>
					<view class="pickerCon">
						<view class="picker" @click="sortShow = true">
							{{sortName ? sortName: '选择排序'}}
						</view>
						<u-select safe-area-inset-bottom :mask-close-able="false" v-model="sortShow"
							mode="single-column" :list="sortList" @confirm="sortConfirm">
						</u-select>
						<u-icon name="arrow-down" color="#999" size="28"></u-icon>
					</view>
				</view>
				<view class="inforList_con">
					<view class="inforItem" v-for="(item,index) in inforList" :key="index"
						@click="goPage('/pagesOther/device/detail?id='+item.id)">
						<view  :class="item.img_url?'inforBody infoBodyAll':'inforBody infoBodyAll'">
							
							
							<view class="inforTit">
								{{item.name}}
							</view>
							<view class="inforBtm" >
								<text class="text1" v-if="item.is_check==1">已审核</text>
								<text>{{item.cate_name}}</text>
							</view>
							<view class="timeBox">
								<view class="inforDate">
									<view class="addressIcon">
										<u-icon name="map" color="#0186E0" size="30"></u-icon>
									</view>
									<view class="inforCity">
										<view class="cityAddress">
											{{item.address}}
										</view>
										<text v-if="item.distance!='未知'" class="textAddress"> · {{item.distance}}</text>
									</view>
								</view>
								<view class="inforHelp">
									已帮助<text>{{item.look_num}}</text>人
								</view>
							</view>
							
						</view>
						
					</view>
				</view>

				<!-- 分页 -->
				<view class="dataEmpty_con">
					<!-- 数据为空 -->
					<u-empty v-if="inforList.length==0"></u-empty>
					<!-- 加载更多 -->
					<view class="loadmore_box" v-if="inforList.length>0">
						<u-loadmore :status="loadStatus" :icon-type="iconType" :load-text="loadText"
							@loadmore="loadmore" />
					</view>
				</view>
			</view>
		</view>

		
		<!-- <view class="cityBox">
			<u-picker mode="region" @confirm="cityConfirm" v-model="cityShow"></u-picker>
			<picker mode="region" value="1"></picker>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 分页
				pages: 1,
				limit: 10,
				last_page: 0,

				// 加载更多
				loadStatus: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '上拉或点击加载更多',
					loading: '努力加载中',
					nomore: '没有更多了'
				},

				// 关键字
				keyword: '',

				// 分类下拉
				catShow: false,
				catList: uni.getStorageSync('catList'),
				catName: '',
				catId: '',

				// 排序下拉
				sortShow: false,
				sortList: [{
						value: '1',
						label: '按最新发布的'
					},
					{
						value: '2',
						label: '按帮助人次数'
					}
				],
				sortName: '',
				sortId: '',

				// 地图选点
				mapCity:uni.getStorageSync('city'),
				cityValue:[],
				// 爆点列表
				inforList: [],
				cityShow:false,
				
				
			}
		},
		onLoad(option) {
			uni.showLoading({
				title: '加载中'
			});
			
			if(option.id){
				this.catId=option.id
			}
			if(option.keyword){
				this.keyword=option.keyword
			}
			
		},
		onShow() {
			let _this = this;
			// 地图选点城市
			// console.log(uni.getStorageSync('mapCity'))
			_this.mapCity = uni.getStorageSync('city') || '';
			_this.cityValue[0]=uni.getStorageSync('province');
			_this.cityValue[1]=uni.getStorageSync('city');
			_this.cityValue[2]=uni.getStorageSync('area');
			_this.getCatList();
			_this.pages = 1;
			_this.getInforList();
		},
		onReady() {

		},
		onReachBottom() {
			var _this = this;
			_this.loadmore();
		},
		onUnload() {
			// 清除设置本地缓存
			uni.setStorageSync('mapCity', '');
		},
		methods: {
			selectCateList(cateId){
				let _this = this;
				_this.catId=cateId;
				_this.sortId='';
				_this.keyword='';
				_this.pages = 1;
				_this.getInforList();
			},
			/**
			 * 城市选择
			 */
			cityConfirm(e){
				console.log(e)
				let _this = this;
				_this.mapCity=e.area.label
				//从新加载对应的数据
				_this.pages = 1;
				_this.getInforList();
			},
			
			citySelect(e){
				console.log(e)
				let _this = this;
				var cityValue=e.detail.value;
				_this.cityValue=cityValue;
				
				_this.pages = 1;
				if(cityValue[0]=='全部'){
					_this.mapCity='全国';
					_this.getInforList();
					return;
				}
				if(cityValue[1]=='全部'){
					_this.mapCity=cityValue[0];
					_this.getInforList();
					return;
				}
				if(cityValue[2]=='全部'){
					_this.mapCity=cityValue[1];
					_this.getInforList();
					return;
				}
				
				_this.mapCity=cityValue[2];
				_this.getInforList();
				// this.cityShow=true;
			},
			// 选择分类
			catConfirm(e) {
				// console.log('选择分类', e.detail.value);
				let _this = this;
				_this.catName = e[0].label;
				_this.catId = e[0].value;

				_this.pages = 1;
				_this.getInforList();
			},

			// 选择排序
			sortConfirm(e) {
				// console.log('选择排序', e);
				let _this = this;
				_this.sortName = e[0].label;
				_this.sortId = e[0].value;

				_this.pages = 1;				
				_this.getInforList();
			},

			// 搜索
			searchClick(e) {
				console.log(e);
				let _this = this;
				_this.keyword = e;
				_this.pages = 1;				
				_this.getInforList();
			},

			// 获取分类
			async getCatList() {
				let _this = this;
				_this.$u.get('/api/device.cate/getList', {}).then(res => {
					uni.hideLoading();
					console.log("==获取分类==");
					console.log(res);
					
					uni.setStorageSync('catList',res.data);
					_this.catList = res.data;
				}).catch(res => {
					console.log(res);
				})
			},

			// 获取爆点列表
			async getInforList() {
				let _this = this;
				var longitude=uni.getStorageSync('longitude');
				var latitude=uni.getStorageSync('latitude');
				var para = {
					pages: _this.pages,
					limit: _this.limit,
					keyword: _this.keyword,
					cate: _this.catId,
					sortType: _this.sortId,
					city: _this.mapCity,
					longitude:longitude,
					latitude:latitude,
				}
				_this.$u.get('/api/device.index/getList', para).then(res => {
					uni.hideLoading();
					console.log("==参数城市==");
					console.log(para);
					console.log("==获取爆点列表==");
					console.log(res);
					var inforList = _this.inforList;
					if (_this.pages == 1) {
						inforList = [];
					}
					_this.inforList = inforList.concat(res.data);

					// 分页状态更新
					_this.last_page = res.extend.last_page;
					if (_this.pages >= _this.last_page) _this.loadStatus = 'nomore';
					else _this.loadStatus = 'loadmore';
				}).catch(res => {
					console.log(res);
				})
			},

			// 点击加载更多
			loadmore() {
				var _this = this;
				if (_this.pages >= _this.last_page) return;
				_this.loadStatus = 'loading';
				_this.pages++;
				setTimeout(() => {
					if (_this.pages >= _this.last_page) _this.loadStatus = 'nomore';
					else _this.loadStatus = 'loading';
					uni.showLoading({
						title: '加载中'
					});
					_this.getInforList();
				}, 2000)
			},

			// 页面跳转
			goPage(url) {
				uni.navigateTo({
					url: url,
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.inforPage_box {
		
	}

	// 搜索
	.inforSearch_box {
		background-color: #0088FE;
		padding:10rpx 20rpx 30rpx 20rpx;
	}

	// 菜单
	.inforMenu_box {
		padding: 30rpx 0;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// box-shadow: 0 8rpx 16rpx 0rpx rgba(24, 24, 24, 0.13);
		
	}

	.menuItem {
		flex: 1;
		text-align: center;
		
	}

	.menuItem .menuIcon {
		width: 100%;
	}

	.menuItem .menuIcon image {
		width: 90rpx;
		height: 90rpx;
		border-radius: 30rpx;
		overflow: hidden;
	}

	.menuItem .menuName {
		font-size:30rpx;
		color: #000;
		margin-top: 10rpx;
	}

	// 列表
	.inforList_box {
		
		border-radius: 10rpx;
		overflow: hidden;
		margin: 20rpx 0 180rpx 0;
		// box-shadow: 0 8rpx 16rpx 0rpx rgba(24, 24, 24, 0.13);
	}

	.inforPicker_con {
		overflow: hidden;
		// margin: 20rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		width: 100%;
		height: 90rpx;
		border-bottom: 2rpx solid #eee;
	}

	.pickerCon {
		flex: 1;
		border-right: 1rpx solid #eee;
		text-align: center;
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pickerCon .picker {
		font-size: 30rpx;
		margin-right: 10rpx;
	}

	.inforList_con {
		overflow: hidden;
	}

	.inforItem {
		padding: 20rpx;
		overflow: hidden;
		background-color: #fff;
		border-bottom: 2rpx solid #eee;
		margin-bottom: 18rpx;
		box-shadow: 0 8rpx 12rpx 0rpx rgba(24, 24, 24, 0.08);
	}

	.inforHeader {
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.inforTit {
		width: 710rpx;
		font-size:30rpx;
		font-weight: bold;
		color: #000;
		line-height: 44rpx;
	}

	.inforStatus {
		width: 90rpx;
		height: 40rpx;
	}

	.inforBody {
		width: 710rpx;
		margin-left: 20rpx;
		justify-content: space-between;
		position: relative;
	}
	.infoBodyAll{
		width: 710rpx;
		margin-left: 0rpx;
	}
	.inforPic {
		width: 140rpx;
		height: 140rpx;
		overflow: hidden;
		margin-right: 20rpx;
		float: left;
		border-radius: 16rpx;
	}
	.inforPic image{
		width: 100%;
		height: 100%;
	}


	.inforBtm {
		width: 100%;
		font-size: 26rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		padding: 10rpx 0;
	}
	
	.inforBtm text{
		background-color: #ececec;
		color: #666666;
		font-size: 22rpx;
		padding: 6rpx 16rpx;
		margin-right: 10rpx;
		border-radius: 6rpx;
	}
	.inforBtm text.text1{
		background-color: #e1f2e0;
		color: #1d891a;
	}
	
	
	.addressIcon{
		width: 30rpx;
		height: 30rpx;
		float:left;
	}
	.inforCity {
		color: #0186E0;
		margin: 0 10rpx;
		font-size: 26rpx;
		float:left;
		width: 430rpx;
		overflow: hidden;
		text-overflow:ellipsis;
		
	}

	
	
	.timeBox{
		width: 100%;
		height: 40rpx;
		overflow: hidden;
		line-height: 40rpx;
		margin-top: 18rpx;
	}
	.inforDate {
		color: #999;
		float: left;
		width: 70%;
	}
	
	.inforHelp {
		float: right;
		text-align: right;
		color: #999;
		width: 30%;
	}

	.inforHelp text {
		color: $uni-color-error;
		margin: 0 5rpx;
	}
	
	.cityAddress{
		width: 70%;
		overflow: hidden;
		height: 50rpx;
		float: left;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow:ellipsis;
	}
</style>
